:host {
  display: flex;
  flex-direction:row;
  align-items:center;
  height:2.4rem;
  justify-content: center;
  background-color:$--white-color;
  position:relative;
  @include border_1px('default', $--lightgray-color, 0);
  .ji-button__label{
    font-size:0.8rem;
    color:inherit;
  }
  &:before{
    content:"";
    position:absolute;
    display:block;
    top:-1px;
    right:-1px;
    bottom:-1px;
    left:0;
    z-index:100;
    background:rgba($--black-color, 0.1);
    opacity:0;
    transition:0.3s;
  }
}
:host([disabled="true"]){
  &:before{
    opacity:1;
    background: rgba($--white-color, 0.8);
  }
}
:host([active="true"]){
  &:before{
    opacity:1;
    transition:0.3s;
  }
}
:host([type]),:host([color]){
  color:$--white-color;
}
:host([type="info"]){
  background-color: $--main-color;
  @include border_1px('default', $--main-color, 0);
  color:$--black-color;
}
:host([type="info"][plain]){
  background-color:rgba($--main-color, 0.1);
  color:$--black-color;
  &:before{
    background-color: rgba($--main-color, 0.1);
  }
}
:host([type="primary"]){
  background-color: $--primary-color;
  @include border_1px('default', $--primary-color, 0);
}
:host([type="primary"][plain]){
  background-color:rgba($--primary-color, 0.1);
  color:$--primary-color;
  &:before{
    background-color: rgba($--primary-color, 0.1);
  }
}
:host([type="danger"][plain]) {
  background-color:rgba($--danger-color, 0.1);
  color:$--danger-color;
  &:before{
    background-color: rgba($--danger-color, 0.1);
  }
}
:host([type="primary"][outline]){
  background-color:$--white-color;
  color:$--primary-color;
  &:before{
    background-color: rgba($--primary-color, 0.1);
  }
}
:host([type="danger"][outline]) {
  background-color:$--white-color;
  color:$--danger-color;
  &:before{
    background-color: rgba($--danger-color, 0.1);
  }
}
:host([type="danger"]){
  background-color:$--danger-color;
  @include border_1px('default', $--danger-color, 0);
}
:host([shape="conner"]) {
  border-radius:$radius;
}
:host([shape="rounder"]) {
  @include border_1px('default', $--lightgray-color, 2.8rem);
  border-radius:1.4rem;
  &:before{
    border-radius:1.4rem;
  }
}
:host([type="primary"][shape="conner"]) {
  @include buttonRadius($radius, $--primary-color)
}
:host([type="primary"][shape="rounder"]) {
  @include buttonRadius(1.2rem, $--primary-color)
}
:host([type="danger"][shape="conner"]) {
  @include buttonRadius($radius, $--danger-color)
}
:host([type="danger"][shape="rounder"]) {
  @include buttonRadius(1.2rem, $--danger-color)
}
:host([shape="rounder"]){
  border-radius:1.4rem;
}
:host([size]){
  display:inline-flex;
  padding:0 1rem;
}
:host([size="mini"]){
  height:$mini;
}
:host([size="small"]){
  height:$small;
}
:host([size="large"]){
  height:$large;
}